require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require("echarts/lib/component/legend")
import Vue from "vue";

//==============================EchartsUtil=================================
const EchartsUtil = {
    //获取option
    /**
     * 
     * @param {tooltip,xAxis,yAxis,grid,series} _obj 
     */
    getOption: function(_obj) {
        let option = {};
        option = {
            tooltip: {
                trigger: 'axis',
                formatter: _obj.tooltip.formatter || null
            },
            grid: _obj.grid || null,
            calculable: false,
            xAxis: [{
                name: _obj.xAxis.name,
                nameTextStyle: {
                    color: '#68676C',
                    fontSize: 11
                },
                type: _obj.xAxis.type || 'category',
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        width: 0
                    }
                },
                splitLine: {
                    show: false
                },
                boundaryGap: true,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#68676C'
                    },
                    formatter: _obj.xAxis.formatter || '{value}'
                },
                data: _obj.xAxis.data
            }],
            yAxis: [{
                type: 'value',
                name: _obj.yAxis.name || null,
                boundaryGap: _obj.yAxis.boundaryGap || true,
                nameTextStyle: {
                    color: '#777',
                    fontSize: 12,
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#dbdbdc']
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#68676C'
                    }
                }
            }],
            series: _obj.series
        };
        if (_obj.legend) {
            option.legend = {
                show: true,
                itemGap: 30, // 间距
                y: 'bottom',
                data: _obj.legend.data,
                textStyle: {
                    color: '#68676C',
                    fontSize: 12
                },
                selected: _obj.legend.selected || {}
            }
        }
        return option;
    },
    getSeries: function(seriesObj) {
        let data = {};
        let itemStyle = {
            normal: {
                color: seriesObj.color || '#f4b600'
            }
        };
        if (seriesObj.type == 'bar') {
            data = {
                type: 'bar',
                name: seriesObj.name,
                barMaxWidth: seriesObj.barMaxWidth || 20,
                itemStyle: itemStyle,
                data: seriesObj.data
            }
        }
        if (seriesObj.type == 'line') {
            data = {
                type: 'line',
                name: seriesObj.name,
                symbolSize: 1, // 折线上的点大小
                smooth: true, // 平滑过渡
                itemStyle: itemStyle,
                data: seriesObj.data
            }
        }
        if (seriesObj.stack) data.stack = seriesObj.stack
        return data
    }
}
Vue.prototype.EchartsUtil = EchartsUtil;
//==============================EchartsUtil=================================